<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Adaptive Learning</title>

    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <link href="css/sb-admin.css" rel="stylesheet">
    <link href="css/plugins/morris.css" rel="stylesheet">
    <link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- jQuery -->
    <script src="js/lib/jquery-2.1.0.js"></script>
    <script src="js/lib/jquery.js"></script>
    <script src="js/lib/bootstrap.min.js"></script>
    <script src="js/lib/bootbox.min.js"></script>
    <script src="js/lib/plugins/morris/raphael.min.js"></script>
    <script src="js/lib/plugins/morris/morris.min.js"></script>
    <script src="js/training.js"></script>


</head>

<body>

    <div id="wrapper">

        <!-- Navigation -->
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a id="nav-home-button" class="navbar-brand" href="#">Adaptive Learning</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">Training</a></li>
                <li><a href="#">Accessment</a></li>
              </ul>
            <!-- /.navbar-collapse -->

            <!-- Top Menu Items -->
            <ul class="nav navbar-right top-nav">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> <b id="userName"></b> <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="#"><i class="fa fa-fw fa-user"></i> Profile</a>
                        </li>
                        <li>
                            <a href="#"><i class="fa fa-fw fa-envelope"></i> Inbox</a>
                        </li>
                        <li>
                            <a href="#"><i class="fa fa-fw fa-gear"></i> Settings</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="index.html"><i class="fa fa-fw fa-power-off"></i> Log Out</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>


        <div id="question-container">
            <div id="question-wrapper" class="panel panel-default">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-md-11">
                            <span id="question" class="panel-title"></span>
                        </div>
                        <div id="question-level-div" class="col-md-1">
                            <span class="glyphicon glyphicon-star"></span>
                            <span class="glyphicon glyphicon-star-empty"></span>
                            <span class="glyphicon glyphicon-star-empty"></span>
                            <span class="glyphicon glyphicon-star-empty"></span>
                            <span class="glyphicon glyphicon-star-empty"></span>
                        </div>
                    </div>
                </div>

                <div class="panel-body">
                    <span id="choices"></span>
                </div>
            </div>
            <!-- /#question-wrapper (panel)-->

            <div id="statistics-wrapper" class="panel panel-default" style="display: none">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-md-11">
                                <font size="6">Training Overview</font>
                        </div>
                        <div class="col-md-1">
                            <button class="btn btn-primary btn-lg" onclick="GoHome()">Home</button>
                        </div>
                    </div>
                </div>

                <div class="panel-body">
                    <div class="col-md-4">
                        <div id="diagram-panel" class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title">Statistics</h3>
                            </div>
                            <div class="panel-body">
                                <div id="morris-chart"></div>
                                <b>Training status: </b><span id="training-status"></span></br>
                                <b>Time complete: </b><span id="time-complete"></span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-8">
                        <div id="question-panel" class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title">Questions</h3>
                            </div>
                            <div class="panel-body">

                                <div id="review-question-select-div">
                                  <select class="form-control form-group" id="review-question-select" onchange="if (this.selectedIndex) ChangeQuestion();">
                                    <option value="1">Question 1</option>
                                    <option value="2">Question 2</option>
                                    <option value="3">Question 3</option>
                                    <option value="4">Question 4</option>
                                    <option value="5">Question 5</option>
                                  </select>

                                </div>
                                <hr>
                                <span id="review-question-span">This is a dummy question</span></br>
                                <span id="review-choice-a-span">This is a choice</span></br>
                                <span id="review-choice-b-span">This is a choice</span></br>
                                <span id="review-choice-c-span">This is a choice</span></br>
                                <span id="review-choice-d-span">This is a choice</span></br></br>
                                <span id="review-response-result-span">Your answer is ...</span></br>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /#statistics-wrapper (panel)-->

            <div id="submit-wrapper" class="row" style="position: relative; bottom: 90px; margin: auto">
            	<div class="col-md-2 col-md-offset-5">
    	            <button class="btn btn-primary btn-lg" onclick="SubmitAnswer()">Submit Answer</button>
    	        </div>
                <div class="col-md-2 col-md-offset-3">
                    <font size="6">
                        <span id="hours">00</span>:
                        <span id="minutes">00</span>:
                        <span id="seconds">00</span>
                    </font>
                </div>
            </div>
        </div>
        <!-- /#question-container -->

    </div>
    <!-- /#wrapper -->

</body>

</html>
